<template>
	<view class="upload-img-container">
		
		<!-- 图片容器 -->
		<view class="upload-img-warp">
			<!-- add-img -->
			<view class="text-xxl"
						v-if="showAddImage"
						@click="chooseImg(9)"
						:style="{ height: height + 'rpx'}">
				<view class="add-img-box">+</view>
			</view>
			
			<!-- show-img -->
			<view v-for="(item, i) in normalImgPaths"
						:key="i" @click="previewImg(i, normalImgPaths)"
				    :style="{ height: height + 'rpx'}">
				<view>
					<u-image width="100%" height="100%" :src="fnImgPath(item)"></u-image>
					<view class="delete-icon" v-if="showDelete" @click.stop="showDeleteModele(i)">
						<!-- 外层容器：阻止icon组件默认点击事件 -->
						<u-icon name="close-circle" color="#ff2e66" size="38rpx"></u-icon>
					</view>
				</view>
			</view>
		
		</view>
		
		<!-- 模态框 -->
		<!-- delete模态框 -->
		<u-modal v-model="showConfirm"
						 content="是否删除该图片？"
						 :show-cancel-button="true"
						 @confirm="deleteImgPath()">
		</u-modal>
		
	</view>
</template>

<script>
	/**
	 * 基于 uview 中 <u-image> 和 <u-icon>
	 * @param {String} action 服务器地址
	 * @param {Array} fileList 图片路径地址数组
	 * @param {string} column 容器一行显示几张图片（默认3）
	 * @param {string} height 图片预览区高度（默认180rpx）
	 */

	/**
	 * 事件
	 * changeFileList(curretnFileList)
	 */

	export default {

		name: "upload-img",

		props: {
			// 服务器地址
			action: String,
			// 默认图片路径
			fileList: {
				type: Array,
				default () {
					return [];
				}
			},
			// 每页数量
			column: 3,
			// 图片高度
			height: {
				type: Number,
				default: 240
			},
			// 是否显示添加图片
			showAddImage: {
				type: Boolean,
				default () {
					return true
				}
			},
			// 是否显示删除按钮
			showDelete: {
				type: Boolean,
				default () {
					return true
				}
			}
		},

		data() {
			return {
				normalImgPaths: '',
				
				showConfirm: false
			};
		},

		watch: {
			fileList() {
				this.normalImgPaths = this.fileList;
			},
			
			normalImgPaths() { // 当前图片路径
				this.$emit('changeFileList', this.normalImgPaths);
			}
		},

		methods: {
			/**
			 * 选择图片
			 * @param {Number} num 每次上传图片数量
			 */
			chooseImg(num) {
				uni.chooseImage({
					count: num,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {
						uni.showLoading({
							title: '上传中'
						});
						const tempImgPaths = [];
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							var path = await this.upload_file_server(tempFilePaths[i]);
							tempImgPaths.push(path);
						}
						uni.hideLoading();
						this.normalImgPaths = this.normalImgPaths.concat(tempImgPaths);
					}
				});
			},

			
			/**
			 * 上传图片 
			 * @param {type} tempFilePath 上传图片文件路径
			 */
			upload_file_server(tempFilePath, data) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.action,
						filePath: tempFilePath,
						name: 'file',
						// formData: data,
						success: function(res) {
							const data = JSON.parse(res.data);
							if (data.code == 200) {
								resolve(data.data.path);
							}
						}
					});
				});
			},
			
			// 图片预览
			previewImg(index, imgPaths) {
				const tempImgPaths = [];
				imgPaths.forEach(item => {
					tempImgPaths.push(this.fnImgPath(item));
				});
				uni.previewImage({
					urls: tempImgPaths,
					current: index,
					indicator: 'default',
					loop: true
				});
			},
			
			// 显示删除确认模态框
			showDeleteModele(i) {
				this.showConfirm = true;
				this.deleteImgIndex = i;
			},
			
			// 删除图片
			deleteImgPath(i) {
				this.normalImgPaths.splice(this.deleteImgIndex, 1);
			},

			/**
			 * @description 图片路径处理
			 * @param {String} imgPath - 图片路径
			 * @return {String} 处理后的图片路径
			 */
			fnImgPath(imgPath) {
				let path;
				
				const aImgpath = imgPath.split('/');
				// 本地图片不处理
				if (aImgpath[0] == '..') {
					path = img_pathl
					return path;
				}
				
				// 服务器获取图片地地址处理
				if ((imgPath.indexOf('http://') == -1) && (imgPath.indexOf('https://') == -1)) {
					path = 'http://cmdh5.yoyosc.com.cn' + imgPath;
					return path;
				} else {
					return imgPath
				}
			}
		},


		created() {
			this.normalImgPaths = this.fileList;
		},

	}
</script>

<style>
	.upload-img-warp {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.upload-img-warp>view {
		display: flex;
		justify-content: center;
		width: calc(100%/ 3);
		height: 240rpx;
		margin-bottom: 10rpx;
	}

	.upload-img-warp>view>view {
		overflow: hidden;
		position: relative;
		width: 90%;
		height: 100%;
		border-radius: 16rpx;
	}

	.add-img-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #d6d6d6;
	}

	.delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
</style>
